const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  target: 'web',
  // 这个属性有三种取值，分别是 production、development 和 none。
  // 1. 生产模式下，Webpack 会自动优化打包结果；
  // 2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
  // 3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.[hash:6].js',
    path: path.join(__dirname, 'dist'),
    // 自定义资源输出文件名 [ext]是扩展名
    assetModuleFilename: 'public/image/[hash:6][ext]',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        // 注意如果项目的 vue 是 2.0+ ，需要安装 @vue-template-compiler
        // 注意如果项目的 vue 是 3.0+ ，需要安装 @vue/compiler-sfc
        loader: 'vue-loader',
      },
      {
        test: /.js$/,
        // 排除 node_modules 不然 html-webpack-plug 插件执行 node_modules 中的代码会报错
        // 这里需要使用绝对路径，不然也会报错
        exclude: path.join(__dirname, 'node_modules'),
        use: ['babel-loader', 'eslint-loader'],
      },
      // 这里会应用到普通的 `.css` 文件 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /.less$/,
        use: [
          // style-loader 会将 css 注入 js 文件中
          // "style-loader",
          // MiniCssExtractPlugin 可以将 css 文件单独提取出来
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        // webpack 5 通过 asset 来加载资源
        // asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
        // asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
        // asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
        // asset 在导出一个 data URI 和发送一个单独的文件之间自动选择
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    // 开发阶段最好不要使用这个插件,直接定位资源即可,避免频繁拷贝消耗内存
    new CopyWebpackPlugin({
      patterns: [{ from: 'public/*.ico' }],
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      title: 'Hello Webpack',
      template: './public/index.html',
      templateParameters: {
        BASE_URL: 'public/',
      },
    }),
  ],
}
